<link rel="stylesheet" type="text/css" href="css/settings.css" />

<div class="Window Messagebox">
    <div class="header" data-bind="text: Application.Resources.Views.Settings.Einstellungen">Einstellungen</div>
    <div class="middle">
        <ul class="nav nav-tabs notifLi">
            <li><a class="notifLi" data-toggle="tab" href="#notifications" style="display:none;" data-bind="text: Application.Resources.Views.Notifications.Notifications, css: { show: isOfflineAllowed }">Notifications</a></li>
            <li><a class="notifLi" data-toggle="tab" href="#errors" data-bind="text: Application.Resources.Views.Notifications.ErrorLog">Error log</a></li>
            <li class="active"><a class="notifLi" data-toggle="tab" href="#about" data-bind="text: Application.Resources.Views.Notifications.About">About</a></li>
            <li><a class="notifLi" data-toggle="tab" href="#pinChange" data-bind="text: Application.Resources.Views.Notifications.Pin_Change">PIN Change</a></li>
            <li><a class="notifLi" data-toggle="tab" href="#licenses" data-bind="text: Application.Resources.Views.Notifications.Licenses">Licenses</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane verticalScroll active overflow-IndicatorContener" id="about">
                <h3 data-bind="text: Application.Resources.Views.Notifications.AppInfo">Application information</h3>
                <div>
                    <span data-bind="text: Application.Resources.Views.Notifications.Version">Version: </span><span></span>
                </div>
                <h3 data-bind="text: Application.Resources.Views.Notifications.WebServerInfo">Web server information</h3>
                <div>
                    <span data-bind="text: Application.Resources.Views.Notifications.WebServiceIP">Web service IP address:</span> <span data-bind="    text: status.ServerIP"></span>
                    <br />
                    <span data-bind="text: Application.Resources.Views.Notifications.ServiceVersion">Service version:</span> <span data-bind="text: status.ServiceVersion"></span>
                </div>
                <div class="overflowIndicator fa fa-sign-out fa-2x fa-rotate-90"></div>
                <h3 data-bind="text: Application.Resources.Views.Notifications.MandantInfo" style="margin-top: 20px">Mandant information</h3>
                <div class="overflowIndicator fa fa-sign-out fa-2x fa-rotate-90"></div>
                <div class="mandantList scroll-y">
                    <ol data-bind="foreach: mandantStatuses" class="notifAbout">
                        <li data-bind="testOverflow:true">
                            <span class="spanBrBold" data-bind="text: MandantName"></span>
                            <span data-bind="text: Application.Resources.Views.Notifications.DatabaseServer">Database server:</span> <span data-bind="    text: ServerName"></span>
                            <br />
                            <span data-bind="text: Application.Resources.Views.Notifications.DatabaseInstance">Database instance:</span> <span data-bind="    text: DatabaseName"></span>
                            <br />
                            <span data-bind="text: Application.Resources.Views.Notifications.ConnectionSuccess">Connection successful:</span> <span data-bind="    text: ConnectionSuccess"></span>
                        </li>
                    </ol>
                </div>
            </div>
            <div class="tab-pane" id="errors">
                <div class="overflow-IndicatorContener">
                    <table class="notifTab scroll-y">
                        <thead>
                            <tr>
                                <th data-bind="text: Application.Resources.Views.Notifications.Date">Date</th>
                                <th data-bind="text: Application.Resources.Views.Notifications.Severity">Severity</th>
                                <!--<th data-bind="text: Application.Resources.Views.Notifications.Name">Name</th>-->
                                <th data-bind="text: Application.Resources.Views.Notifications.Message">Message</th>
                                <th data-bind="text: Application.Resources.Views.Notifications.AdditionalInfo">Additional info</th>
                            </tr>
                        </thead>
                        <tbody id="error-list" data-bind="foreach: $root.errors">
                            <tr data-binding="testOverflow:true">
                                <td data-bind="text: Globalize.format(timestamp, 'T')"></td>
                                <td>
                                    <div data-bind="css: { error: severity == 0, warning: severity == 1, info: severity == 2 }, attr: { title: name }">
                                    </div>
                                </td>
                                <!--<td data-bind="text: name"></td>-->
                                <td data-bind="text: message"></td>
                                <td data-bind="text: additionalInfo"></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="overflowIndicator fa fa-sign-out fa-2x fa-rotate-90"></div>
                </div>
                <div class="center-text">
                    <span class="styledButton leftalign">
                        <button data-bind="click: startLogging, css: { disabled: isLogging }, text: Application.Resources.Views.Notifications.StartLogging">Start logging</button>
                    </span>
                    <span class="styledButton leftalign">
                        <button data-bind="click: stopLogging, css: { disabled: !isLogging }, text: Application.Resources.Views.Notifications.StopLogging">Stop logging</button>
                    </span>
                    <span class="styledButton leftalign">
                        <button data-bind="click: clearLogs, text: Application.Resources.Views.Notifications.ClearErrorLog">Clear</button>
                    </span>
                </div>
            </div>
            <div class="tab-pane" id="notifications">
                <!--offline part-->
                <div>
                    <div id="DateTo" class="input-append date center-text tap-space-top" data-bind="datetimepicker: dateTo, datetimepickerOptions: { pickTime: false, startDate: new Date(), endDate: maxCheckoutEndDate }">
                        <span data-bind="text: Application.Resources.Views.Notifications.Zeit_bis">Zeit bis:</span>
                        <input class="border-brown" data-format="yyyy-MM-dd" type="text" />
                        <span class="add-on">
                            <i data-time-icon="fa fa-clock-o" data-date-icon="fa fa-calendar"></i>
                        </span>
                    </div>
                    <div class="center-text tap-space-top">
                        <button class="orangeButton-fit" data-bind="click: checkin, text: Application.Resources.Views.Notifications.Check_in, css: { 'buttonInactive': isBusy}">Check in</button>
                        <button class="orangeButton-fit" data-bind="click: checkout, text: Application.Resources.Views.Notifications.Check_out, css: { 'buttonInactive': isBusy}">Check out</button>
                        <button class="orangeButton-fit" data-bind="click: clear, text: Application.Resources.Views.Notifications.Clear_all, css: { 'buttonInactive': isBusy}">Clear all local data</button>
                    </div>
                </div>
                <div class="overflow-IndicatorContener">
                    <div class="overflowIndicator fa fa-sign-out fa-2x fa-rotate-90"></div>
                    <div class="notifTab scroll-y">
                        <table style="border-spacing:5px">
                            <thead>
                                <tr>
                                    <th data-bind="text: Application.Resources.Views.Notifications.Message">Message</th>
                                </tr>
                            </thead>
                            <tbody id="notification-list" data-bind="foreach: $root.notifications" style="display:block">
                                <tr data-bind="testOverflow:true">
                                    <td class="spanBold" data-bind="text: Globalize.format(timestamp, 'T')"></td>
                                    <td data-bind="text: text"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="pinChange">
            </div>
            <div class="tab-pane" id="licenses">
                <div class=" overflow-IndicatorContener overflow">
                    <div class="overflowIndicator fa fa-sign-out fa-2x fa-rotate-90"></div>
                    <ul class="licenses scroll-y" data-bind="foreach: licenses">
                        <li>
                            <h3> <span data-bind="text: LibraryName"></span></h3>
                            <!-- ko if: LibraryVersion -->
                            <span data-bind="text: Application.Resources.Views.Notifications.Licenses_Version">Version: </span><span data-bind="text: LibraryVersion"></span> <br />
                            <!-- /ko -->
                            <!-- ko if: LibraryUrl -->
                            <span data-bind="text: Application.Resources.Views.Notifications.Licenses_URL">Libary URL: </span><a href="#" data-bind="click: $root.openUrl.bind(LibraryUrl, LibraryUrl)"><span data-bind="text: LibraryUrl"></span></a> <br />
                            <!-- /ko -->
                            <span data-bind="text: Application.Resources.Views.Notifications.Licenses_License">License: </span><span data-bind="text: License"></span><br />
                            <span data-bind="text: Application.Resources.Views.Notifications.Licenses_Details">License details: </span><span data-bind="foreach: LicenseUrls"><a href="#" data-bind="click: $root.openUrl"><span data-bind="text: $data"></span></a><span data-bind="if: $index() < ($parent.LicenseUrls.length - 1)">, </span></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </div>